﻿define(function (require) {
    var utility = require('utility/utility.js');
    var service = require('utility/service');
    var WorkitemView = require('views/workitemlist.view');

    require('models/workitem');
    require('models/workitemlist');

    return Backbone.View.extend({
        tagName: "div",
        template: _.template($("#workitem-container").html()),
        events: {
            "tap .btn-back": "goBack"
        },
        render: function () {
            console.log("workitem container render");
            var project = this.project;
            
            $(this.el).html(this.template(project));
            workitemView = new WorkitemView(
                {
                    model: new WorkitemList(
                        null,
                        { projectId: project.Id ? project.Id : null }
                    )
                }
            );

            $(this.el).find('.content-primary').append(workitemView.el);
            $('#workitem-page').append(this.el);
            
            return this;
        },
        project: null,
        initialize: function (arg) {
            $('#workitem-page').empty();

            this.project = arg.project;
            _.bindAll(this, 'render');
        },
        goBack: function () {
            EventProxy.trigger(EventProxy.Events.goToPage, '#project-page');
        },
        clear: function () {
            $(this.el).remove();
        }
    });

});